<!DOCTYPE html>
<html>
<head>
    <title>Inertial Reference Frames</title>
</head>
<body>
    <canvas id="relativityCanvas" width="550" height="250"></canvas>
    <script>
        const canvas = document.getElementById('relativityCanvas');
        const ctx = canvas.getContext('2d');

        // Drawing parameters
        const y_axis = 150;
        const y_v_arrow = 60;
        const x_O = 80;
        const x_O_prime = 180;
        const x_arrow1_pos = 400;
        const x_arrow2_pos = 480;
        const x_v_start = 280;
        const x_v_end = 420;

        const point_radius = 5;
        const lineWidth = 2;
        const arrowHeadLength = 12;

        // Styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = lineWidth;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Helper function to draw an arrow (line + head)
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);

            // Draw the line
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();

            // Draw the arrowhead
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.fill();
        }
        
        // Helper function to draw just an arrowhead
        function drawArrowHead(ctx, x, y, angle, headlen) {
            ctx.save();
            ctx.beginPath();
            ctx.translate(x, y);
            ctx.rotate(angle);
            ctx.moveTo(0, 0);
            ctx.lineTo(-headlen, headlen / 2);
            ctx.lineTo(-headlen, -headlen / 2);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }

        // 1. Draw the main axis line
        ctx.beginPath();
        ctx.moveTo(x_O - 20, y_axis);
        ctx.lineTo(x_arrow2_pos + 20, y_axis);
        ctx.stroke();

        // 2. Draw arrowheads on the main axis
        drawArrowHead(ctx, x_arrow1_pos, y_axis, 0, arrowHeadLength);
        drawArrowHead(ctx, x_arrow2_pos, y_axis, 0, arrowHeadLength);

        // 3. Draw the origins O and O'
        // Point O
        ctx.beginPath();
        ctx.arc(x_O, y_axis, point_radius, 0, 2 * Math.PI);
        ctx.fill();

        // Point O'
        ctx.beginPath();
        ctx.arc(x_O_prime, y_axis, point_radius, 0, 2 * Math.PI);
        ctx.fill();

        // 4. Draw the labels
        // Label S系
        ctx.font = 'italic 32px "Times New Roman"';
        ctx.fillText('S', x_O - 25, y_axis - 40);
        ctx.font = '32px "KaiTi", "SimSun"';
        ctx.fillText('系', x_O + 2, y_axis - 40);

        // Label S'系
        ctx.font = 'italic 32px "Times New Roman"';
        ctx.fillText("S'", x_O_prime - 20, y_axis - 40);
        ctx.font = '32px "KaiTi", "SimSun"';
        ctx.fillText('系', x_O_prime + 12, y_axis - 40);
        
        // Label O
        ctx.font = 'italic 32px "Times New Roman"';
        ctx.fillText('O', x_O, y_axis + 30);

        // Label O'
        ctx.font = 'italic 32px "Times New Roman"';
        ctx.fillText("O'", x_O_prime, y_axis + 30);

        // Label x
        ctx.fillText('x', x_arrow1_pos - 35, y_axis + 30);

        // Label x'
        ctx.fillText("x'", x_arrow2_pos - 35, y_axis + 30);

        // Label v
        ctx.fillText('v', (x_v_start + x_v_end) / 2, y_v_arrow - 25);
        
        // 5. Draw the velocity vector for S'
        drawArrow(ctx, x_v_start, y_v_arrow, x_v_end, y_v_arrow, arrowHeadLength);

    </script>
</body>
</html>